<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8" />  
<title>jquery实现当页面滚动超过一屏时显示返回顶部按钮</title>  
<style>  
    #go_top{position:fixed; LEFT: 85%;bottom:50px;}  
</style>  
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("#go_top").hide();  
    $(function () {  
        //检测屏幕高度  
        var height=$(window).height();  
        //scroll() 方法为滚动事件  
        $(window).scroll(function(){  
            if ($(window).scrollTop()>height){  
                $("#go_top").fadeIn(500);  
            }else{  
                $("#go_top").fadeOut(500);  
                }  
        });  
        $("#go_top").click(function(){  
            $('body,html').animate({scrollTop:0},100);  
            return false;  
        });  
    });  
});  
</script>  
</head>  
<body>  
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>  
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>  
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>  
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>  
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>  
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>  
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>  
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>  
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>  
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>  
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>  
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>  
<div id="go_top">  
    <img src="./img/top.png"/ alt="回到顶部图片">  
</div>  
</body>  
</html> 